<template>
  <MainSlot>
    <template v-slot:searchForm>
      <SearchForm :searchList="searchList" @querySearchForm="querySearchForm"></SearchForm>
    </template>
    <template v-slot:btnList>
      <BtnSlot :btnList="btnList" @handleClick="handleClick"></BtnSlot>
    </template>
    <template v-slot:content>
      <TableSlot ref="taskTable" :configFlag="{ needPage: true }" :pageValue="pageValue" @sizeChange="handleSizeChange"
        @handleChange="handlePageChange">
        <template v-slot:table>
          <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" border fit
            highlight-current-row height="100%">
            <el-table-column label="序号" width="80" align="center">
              <template slot-scope="scope">
                {{ getTableItemIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column label="项目名称" min-width="240" align="center">
              <template slot-scope="scope">
                {{ scope.row.projectName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="阶段名称" align="center" width="120">
              <template slot-scope="scope">
                {{ scope.row.executionsName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="阶段负责人" align="center" width="120">
              <template slot-scope="scope">
                {{ scope.row.realName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="计划开始" width="120" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.begin || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划结束" width="120" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.end || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="阶段状态" width="120" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.status || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际开始" width="120" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.realBegan || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实际结束" width="120" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.realEnd || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="周期" align="center" width="80">
              <template slot-scope="scope">
                {{ scope.row.cycle || 0 }}h
              </template>
            </el-table-column>
            <el-table-column label="预计工时" align="center" width="80">
              <template slot-scope="scope">
                {{ scope.row.totalEstimate || 0 }}h
              </template>
            </el-table-column>
            <el-table-column label="实际消耗工时" align="center" width="100">
              <template slot-scope="scope">
                {{ scope.row.totalConsumed || 0 }}h
              </template>
            </el-table-column>
            <el-table-column label="逾期天数" align="center" width="80">
              <template slot-scope="scope">
                {{ scope.row.overdueDay || 0 }}天
              </template>
            </el-table-column>
            <el-table-column label="逾期工时" align="center" width="80">
              <template slot-scope="scope">
                {{ scope.row.overdue || 0 }}h
              </template>
            </el-table-column>
            <!-- <el-table-column label="项目总工时" align="center" width="150">
              <template slot-scope="scope">
                {{ scope.row.totalHours || 0 }}h
              </template>
            </el-table-column> -->
          </el-table>
        </template>
      </TableSlot>
    </template>
  </MainSlot>
</template>

<script>

import SearchForm from "@/components/SearchForm"
import MainSlot from "@/components/MainSlot"
import BtnSlot from "@/components/BtnSlot"
import TableSlot from "@/components/CustomizeTableSlot"
import tableApi from "@/api/table.js"
export default {
  components: { MainSlot, BtnSlot, TableSlot, SearchForm },
  data() {
    return {
      tableData: [],
      searchFormData: {},
      searchList: [
        {
          label: '项目名称',
          falg: 'projects',
          key: 'projectName',
          defaultData: null
        },
        {
          label: '执行名称',
          falg: 'input',
          key: 'executionsName',
          defaultData: null
        },
        // {
        //   label: '阶段状态',
        //   falg: 'select',
        //   key: 'status',
        //   options:[
        //     {label:'未开始',value:'未开始'},
        //     {label:'已完成',value:'已完成'},
        //     {label:'进行中',value:'进行中'},
        //     {label:'已取消',value:'已取消'},
        //   ],
        //   defaultData: null
        // }
      ],
      listLoading: false,
      btnList: [
        { name: '重置', flag: 'reset', icon: 'el-icon-refresh-right' },
        { name: '导出', flag: 'download', icon: 'el-icon-download' },
      ],
      pageValue: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        pageLayout: "total,sizes,prev,pager,next,jumper"
      },
    }
  },
  created() {
    this.queryTableList();
  },
  methods: {
    querySearchForm(e) {
      this.pageValue.pageNum = 1;
      this.pageValue.pageSize = 20;
      console.log(e)
      let dataList = e.dataList
      this.searchFormData = {
        ...e,
        endTime: dataList ? dataList[1] || '' : '',
        startTime: dataList ? dataList[0] || '' : ''
      }
      this.queryTableList();
    },
    async queryTableList() {
      let { pageSize, pageNum } = this.pageValue;
      let params = {
        page: pageNum,
        size: pageSize,
        entity: { ...this.searchFormData }
      }
      this.listLoading = true;
      this.tableData = []
      let res = await tableApi.executionsList(params);
      this.listLoading = false;
      let data = res.data;
      let { total } = data
      this.pageValue.total = total || 10;
      this.tableData = data.list
    },
    async exportTable() {
      let response = await tableApi.tasksExport({ ...this.searchFormData })
      this.$downFile(response, '已完成项目表')
    },
    handleClick(flag) {
      if (flag == 'download') {
        this.exportTable()
      } else if (flag == 'reset') {
        this.queryTableList();
      }
    },
    // 表格分页-页容改变
    handleSizeChange(e) {
      this.pageValue.pageSize = e;
      this.pageValue.pageNum = 1;
      this.queryTableList();
    },
    // 表格分页-页数改变
    handlePageChange(e) {
      this.pageValue.pageNum = e;
      this.queryTableList();
    },
    //获取index
    getTableItemIndex(index) {
      let { pageSize, pageNum } = this.pageValue;
      return index + 1 + ((pageNum - 1) * pageSize)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table thead.is-group th {
  background-color: transparent;
}
</style>
